import React, { Component} from 'react'
import { connect} from 'react-redux'
import { Redirect} from 'react-router-dom'
import {
    NavBar, InputItem,
    List, Grid,
    Button, TextareaItem,
    WhiteSpace, Toast
} from 'antd-mobile'
import HeaderSelect from '../../components/headerSelect/headerSelect'
import { updateBoox} from '../../redux/actions'


class Boxx extends Component{

    state = {
        header: '',
        post: '',//职位
        info: '',//个人或者职位的描述
        company: '',//公司名称
        salary: ''//月薪
    }

    //更新状态
    boxxClick = (type, val) => {
        this.setState({
            [type]: val
        })
    }

    //设置选择的头像
    setBoxxHeader = header => {
        this.setState({
            header
        })
    }

    savaClick = () => {
        //这里一旦保存之后就会发送ajax请求
        this.props.updateBoox(this.state, this.remin)
    }

    //提示错误的信息
    remin = (msg) => {
        Toast.fail(msg, 1)
    }

    render(){
        //重定向到主页面
        const { info} = this.props.user
        if (info){
            return <Redirect to='/boxxlist'/>
        }
        return(
            <div>
                <NavBar>老板信息完善</NavBar>
                <HeaderSelect setBoxxHeader={ this.setBoxxHeader}/>
                <List>
                    <WhiteSpace size='lg' />
                    <InputItem placeholder='输入您的招聘职位' onChange={ val => { this.boxxClick('post', val)}}>招聘职位</InputItem>
                    <InputItem placeholder='输入您的公司名称' onChange={ val => { this.boxxClick('company', val)}}>公司名称</InputItem>
                    <InputItem placeholder='输入您的招聘薪资' onChange={ val => { this.boxxClick('salary', val)}}>招聘薪资</InputItem>
                    <TextareaItem
                        title='职位描述'
                        rows={3}
                        onChange={ val => { this.boxxClick('info', val)}}
                                />
                    <Button type='primary' onClick={ this.savaClick}>保存</Button>
                </List>
            </div>
        )
    }
}

export default connect(
    state => ({ user: state.user}),
    { updateBoox}
)(Boxx)